<template>
  <ga-modal
    v-model:visible="visible"
    :width="640"
    :body-style="{ 'max-height': '400px' }"
    @close="handleCancel(formRef)"
  >
    <template #title>网卡配置</template>
    <ga-spin style="width: 100%" :loading="loading">
      <BaseTable
        ref="baseTableRef"
        :apiUrl="getVmList"
        :columns="columns"
        :isShowAddBtn="false"
        :isShowLeft="false"
        :isShowPagination="false"
        height="100%"
      >
        <template #status="{ record }">
          <ga-switch
            size="mini"
            v-model="record.status"
            @change="handleEnabledChange(record)"
          />
        </template>
      </BaseTable>
    </ga-spin>

    <template #footer>
      <ga-button @click="visible = false">取消</ga-button>
      <!-- <ga-button type="primary" @click="handleOk" :loading="okLoading"> 确定 </ga-button> -->
    </template>
  </ga-modal>
</template>
<script setup>
import { ref, h, reactive } from "vue";
import { getVmListDetail, getVmList } from "@/api/vm";
import { RULE } from "@/constant/validators";
import useLoading from "@/hooks/loading";

const { loading, setLoading } = useLoading(false);
const formRef = ref(null);
const okLoading = ref(false);
const formData = reactive({
  name: "",
  description: "",
});
const visible = ref(false);
const curId = ref("");
const open = async (record) => {
  visible.value = true;
  if (record && record?.id) {
    setLoading(true);
    curId.value = record.id;
    Object.keys(formData).forEach((item) => {
      formData[item] = record[item];
    });
    setLoading(false);
  }
};
// 保存
const emits = defineEmits(["fetchData"]);
const handleOk = async () => {
  const res = await formRef.value?.validate();
  if (!res) {
    okLoading.value = true;
    // try {
    //   const obj = formatVpcCreateParams(type, formData, tableData.value);
    //   const { code } = await createSnapshot(obj, "network-vpc");
    //   if (code === 20000) Message.success("操作成功");
    //   emits("fetchData");
    //   visible.value = false;
    // } finally {
    //   okLoading.value = true;
    // }
  }
};
const handleCancel = (formEl) => {
  curId.value = "";
  formEl.resetFields();
};
const columns = [
  {
    title: "IP",
    dataIndex: "cpuCores",
  },
  {
    title: "MAC地址",
    dataIndex: "memory",
  },
  {
    title: "是否启用",
    slotName: "status",
    width: 100,
  },
];
defineExpose({ open });
</script>
